<template>

  <div id="div-loading-bg">
    <div id="elmloading">
      <span v-show="showText" id="span-load" v-text="loadtext"></span>
    </div>

    <!--<div id="elmloading">-->
    <!--<div class="imgbox">-->
    <!--<div class="img">-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="loadfoot">-->
    <!--<span class="footspan"></span>-->
    <!--</div>-->
    <!--</div>-->


  </div>
</template>

<script>

  export default {
    props: ['loadtext','showText'],
      data() {
      return {

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #div-loading-bg {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 99;
  }

  #elmloading {
    width: 200px;
    height: 20px;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -60px;
    z-index: 100;
  }

  #span-load{
    color: #1f2d3d;
    font-size: 20px;
    font-weight: bold;
  }

  #span-load:after {
    content: '';
    margin-left: 5px;
    animation: myfirst 1.2s infinite;
  }

  @keyframes myfirst {
    0% {
      content: '';
    }
    12.5% {
      content: '·';
    }
    25% {
      content: '··';
    }
    37.5% {
      content: '···';
    }
    50% {
      content: '····';
    }
    62.5% {
      content: '···';
    }
    75% {
      content: '··';
    }
    87.5% {
      content: '·';
    }
    100% {
      content: '';
    }
  }

  /*.imgbox{*/
  /*width: 50px;*/
  /*height: 50px;*/
  /*animation: myfirst 0.8s infinite;*/
  /*}*/
  /*.img{*/
  /*height: 100%;*/
  /*width: 100%;*/
  /*background: url('../assets/icon_loading.png') no-repeat;*/
  /*background-size:100%;*/
  /*animation: myf 5.6s infinite;*/
  /*}*/
  /*.loadfoot{*/
  /*height: 20px;*/
  /*position: absolute;*/
  /*bottom: 0px;*/
  /*width: 100%;*/
  /*text-align: center;*/
  /*}*/
  /*.footspan{*/
  /*display: inline-block;*/
  /*height: 10px;*/
  /*width: 20px;*/
  /*margin: 5px 0px;*/
  /*border-radius: 50%;*/
  /*animation: foot 0.8s infinite;*/
  /*background: radial-gradient(#7E7E7E, #EDEDED);*/
  /*}*/

  /*@keyframes myfirst*/
  /*{*/
  /*0% {margin-top:0px;}*/
  /*50% {margin-top:50px;}*/
  /*100% {margin-top:0px;}*/
  /*}*/
  /*@keyframes myf*/
  /*{*/
  /*0% {background-position:0% 0%;}*/
  /*14.2% {background-position:0% 0%;}*/
  /*14.2001% {background-position:0% 16%;}*/
  /*28.4% {background-position:0% 16%;}*/
  /*28.4001% {background-position:0% 33%;}*/
  /*42.6% {background-position:0% 33%;}*/
  /*42.6001% {background-position:0% 50%;}*/
  /*56.8% {background-position:0% 50%;}*/
  /*56.8001% {background-position:0% 67%;}*/
  /*71% {background-position:0% 67%;}*/
  /*71.0001% {background-position:0% 84%;}*/
  /*85.2% {background-position:0% 84%;}*/
  /*85.2001% {background-position:0% 100%;}*/
  /*100% {background-position:0% 100%;}*/
  /*}*/

  /*@keyframes foot*/
  /*{*/
  /*0% {width:20px;}*/
  /*50% {width:100%;}*/
  /*100% {width:20px;}*/
  /*}*/
</style>
